<template>
  <div class="partner-detail">
    <a-modal
      v-model:visible="visible"
      title="合伙人详情"
      :width="800"
      :footer="false"
      unmount-on-close
    >
      <a-descriptions
        :column="{ xs: 1, sm: 2, md: 2 }"
        :data="descData"
        :bordered="true"
        size="large"
        title="基本信息"
      />
      
      <a-space direction="vertical" :size="16" style="width: 100%; margin-top: 24px">
        <!-- 身份证信息 -->
        <a-card v-if="partnerData.idCard || partnerData.idCardPhotoPositive || partnerData.idCardPhotoBack" title="身份证信息">
          <a-descriptions :column="{ xs: 1, sm: 2, md: 2 }" :data="idCardData" />
          
          <a-row :gutter="16" style="margin-top: 16px">
            <a-col :span="12" v-if="partnerData.idCardPhotoPositive">
              <a-card title="身份证正面">
                <a-image
                  :src="partnerData.idCardPhotoPositive"
                  :width="320"
                  height="180"
                  fit="contain"
                />
              </a-card>
            </a-col>
            <a-col :span="12" v-if="partnerData.idCardPhotoBack">
              <a-card title="身份证反面">
                <a-image
                  :src="partnerData.idCardPhotoBack"
                  :width="320"
                  height="180"
                  fit="contain"
                />
              </a-card>
            </a-col>
          </a-row>
        </a-card>
        
        <!-- 账户信息 -->
        <a-card title="账户信息">
          <template #extra>
            <a-space>
              <a-button type="text" @click="copyAllInfo">
                <template #icon><icon-copy /></template>
                一键复制
              </a-button>
              <a-button type="text" @click="exportAccountInfo">
                <template #icon><icon-download /></template>
                导出
              </a-button>
            </a-space>
          </template>
          <a-descriptions :column="{ xs: 1, sm: 2, md: 2 }" :data="accountData">
            <template #value="{ data }">
              <a-space>
                {{ data.value }}
                <a-button
                  v-if="data.copyable && data.value !== '-'"
                  type="text"
                  size="mini"
                  @click="copyText(data.value)"
                >
                  <template #icon><icon-copy /></template>
                  复制
                </a-button>
              </a-space>
            </template>
          </a-descriptions>
        </a-card>
      </a-space>
    </a-modal>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed, PropType, watchEffect } from 'vue';
import { 
  Partner, 
  PartnerTypeEnum, 
  PartnerRoleEnum, 
  StatusEnum 
} from '@/api/partner';
import { Message } from '@arco-design/web-vue';
import { IconDownload, IconCopy } from '@arco-design/web-vue/es/icon';
import dayjs from 'dayjs';

const props = defineProps({
  visible: {
    type: Boolean,
    default: false,
  },
  partnerData: {
    type: Object as PropType<Partial<Partner>>,
    default: () => ({}),
  },
});

const emit = defineEmits(['update:visible']);

// 处理 visible 变化
const visible = computed({
  get: () => props.visible,
  set: (val) => emit('update:visible', val),
});

// 格式化日期时间
function formatDateTime(date: string | undefined) {
  if (!date) return '-';
  return dayjs(date).format('YYYY-MM-DD HH:mm:ss');
}

// 获取合伙人类型名称
function getPartnerTypeName(type: number | undefined) {
  if (type === undefined) return '-';
  const typeMap = {
    [PartnerTypeEnum.PERSONAL]: '加盟',
    [PartnerTypeEnum.ENTERPRISE]: '购买',
  };
  return typeMap[type as keyof typeof typeMap] || '-';
}

// 获取合伙人角色名称
function getPartnerRoleName(role: number | undefined) {
  if (role === undefined) return '-';
  const roleMap = {
    [PartnerRoleEnum.COMPANY]: '公司合伙人',
    [PartnerRoleEnum.MARKET]: '市场合伙人',
    [PartnerRoleEnum.MANAGER]: '管理合伙人',
    [PartnerRoleEnum.COMMISSION]: '分佣合伙人',
  };
  return roleMap[role as keyof typeof roleMap] || '-';
}

// 业务模式
function getBusinessModeName(mode: number | undefined) {
  if (mode === undefined) return '-';
  const modeMap = {
    0: '模式一',
    1: '模式二',
    2: '模式三',
  };
  return modeMap[mode as keyof typeof modeMap] || '-';
}

// 获取状态名称
function getStatusName(enabled: boolean | undefined) {
  if (enabled === undefined) return '-';
  return enabled ? '启用' : '禁用';
}

// 基本信息
const descData = computed(() => {
  return [
    {
      label: '合伙人名称',
      value: props.partnerData.realName || '-',
    },
    {
      label: '合伙人类型',
      value: getPartnerTypeName(props.partnerData.source),
    },
    {
      label: '合伙人角色',
      value: getPartnerRoleName(props.partnerData.partnerRole),
    },
    {
      label: '手机号码',
      value: props.partnerData.mobile || '-',
    },
    {
      label: '昵称',
      value: props.partnerData.nickName || '-',
    },
    {
      label: '状态',
      value: getStatusName(props.partnerData.enabled),
    },
    {
      label: '业务模式',
      value: getBusinessModeName(props.partnerData.businessMode),
    },
    {
      label: '分佣比例',
      value: props.partnerData.managerPartnerDivideRate ? `${props.partnerData.managerPartnerDivideRate}%` : '-',
    },
    {
      label: '创建时间',
      value: formatDateTime(props.partnerData.createDate),
    },
    {
      label: '更新时间',
      value: formatDateTime(props.partnerData.updateDate),
    },
    {
      label: '备注',
      value: props.partnerData.remark || '-',
      span: 2,
    },
  ];
});

// 身份证信息
const idCardData = computed(() => {
  return [
    {
      label: '身份证号',
      value: props.partnerData.idCard || '-',
      span: 2,
    },
  ];
});

// 账户信息
const accountData = computed(() => {
  return [
    {
      label: '平台地址',
      value: 'https://zs.izscd.com/',
      span: 2,
      copyable: true,
    },
    {
      label: '登录用户名',
      value: props.partnerData.username || '-',
      copyable: true,
    },
    {
      label: '登录密码',
      value: props.partnerData.password || '-',
      copyable: true,
    }
  ];
});

// 复制文本
const copyText = (text: string) => {
  navigator.clipboard.writeText(text).then(() => {
    Message.success('复制成功');
  }).catch(() => {
    Message.error('复制失败');
  });
};

// 复制所有账户信息
const copyAllInfo = () => {
  const content = `平台地址：https://zs.izscd.com/
登录用户名：${props.partnerData.username || '-'}
登录密码：${props.partnerData.password || '-'}`;

  navigator.clipboard.writeText(content).then(() => {
    Message.success('复制成功');
  }).catch(() => {
    Message.error('复制失败');
  });
};

// 导出账户信息
const exportAccountInfo = () => {
  try {
    const content = `平台地址：https://zs.izscd.com/
登录用户名：${props.partnerData.username || '-'}
登录密码：${props.partnerData.password || '-'}`;
    
    const blob = new Blob([content], { type: 'text/plain;charset=utf-8' });
    const url = window.URL.createObjectURL(blob);
    const link = document.createElement('a');
    link.href = url;
    link.download = `账户信息_${props.partnerData.realName || '未命名'}_${dayjs().format('YYYYMMDD')}.txt`;
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
    window.URL.revokeObjectURL(url);
    Message.success('导出成功');
  } catch (error) {
    console.error('导出失败:', error);
    Message.error('导出失败');
  }
};
</script>

<style scoped lang="less">
:deep(.arco-descriptions-title) {
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 16px;
}

:deep(.arco-card) {
  border-radius: 4px;
  
  .arco-card-header {
    height: auto;
    padding: 12px 16px;
  }
}
</style> 